<template>
     <div class="main-slider">
        <el-menu default-active="1-4-1" class="el-menu-vertical-demo" :collapse="isCollapse" :router="true">
          <el-menu-item index="/dashboard">
            <i class="fa fa-th-large"></i>
            <span slot="title">仪表盘</span>
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              <i class="fa fa-file-word-o"></i>
              <span slot="title">文章管理</span>
            </template>
            <el-menu-item index="/article/archive">归档</el-menu-item>
            <el-menu-item index="/article/list">文章列表</el-menu-item>
            <el-menu-item index="/article/tag_list">标签列表</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="fa fa-comments-o"></i>
              <span slot="title">评论管理</span>
            </template>
            <el-menu-item index="/comments/list">评论列表</el-menu-item>
          </el-submenu>
           <el-submenu index="4">
            <template slot="title">
              <i class="fa fa-user-circle-o"></i>
              <span slot="title">用户管理</span>
            </template>
            <el-menu-item index="/userlist">用户列表</el-menu-item>
          </el-submenu>
           <el-submenu index="5">
            <template slot="title">
              <i class="fa fa-bookmark-o"></i>
              <span slot="title">项目管理</span>
            </template>
            <el-menu-item index="/project/column">项目栏目列表</el-menu-item>
            <el-menu-item index="/project/list">项目列表</el-menu-item>
          </el-submenu>
          <el-menu-item index="/link/list">
            <i class="fa fa-link"></i>
            <span slot="title">友链管理</span>
          </el-menu-item>
          <el-menu-item index="/personal">
            <i class="fa fa-id-card-o"></i>
            <span slot="title">个人介绍</span>
          </el-menu-item>

          <el-menu-item index="/settings">
            <i class="fa fa-cog"></i>
            <span slot="title">系统配置</span>
          </el-menu-item>
        </el-menu>
        <div class="slider-zoom">
          <el-button :class="isCollapse ? 'fa fa-chevron-right slider-small-zoom' : 'fa fa-chevron-left slider-large-zoom'" circle  @click="isCollapse = !isCollapse" ></el-button>
        </div>
      </div>
</template>

<script>
export default {
    name: 'MainSlider',
    data() {
      return {
        isCollapse: false,
      };
    },
    methods: {
      changeCollapse() {
        this.isCollapse = !this.isCollapse
      }
    }
}
</script>

